<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery/jquery-1.5.1.js"></script>
<script type="text/javascript" src="../js/img_scroll/jcarousellite_1.0.1.min.js"></script>
<script type="text/javascript" src="../js/img_scroll/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="../js/img_scroll/jquery.mousewheel.min.js"></script>
<style type="text/css">
body {
    text-align: center;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

a, a:visited {
    text-decoration: none;
}

.anyClass {
    position: relative;
}

a.prev, a.next {
    border: medium none;
    cursor: pointer;
    display: block;
    height: 58px;
    overflow: hidden;
    position: absolute;
    text-indent: -9999px;
    width: 58px;
    z-index: 999;
}

a.prev {
    background: url("./arrow_left.png");
    top: 210px;
    left: 10px;
}

a.next {
    background: url("./arrow_right.png");
    top: 210px;
    right: 10px;
}

div.dot_tip {
    position: absolute;
    top: 430px;
    height: 9px;
    width: 100%;
    text-align: center;
    z-index: 999;
    margin: 0;
    padding: 0;
}
a.toc {
    border: medium none;
    cursor: pointer;
    display: inline;
    height: 9px;
    text-indent:-9999px;
    width: 9px;
    background-image: url("./toggle.png");
    background-position: left top;
    background-repeat: no-repeat;
    text-decoration: none;
}
</style>
<script type="text/javascript">
$(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        visible: 1,
        //auto: 6000,
        speed: 500,
        btnGo: [".dot_tip .0", ".dot_tip .1", ".dot_tip .2"],
        afterEnd: function(a) {
            $(".dot_tip a").css("background-image", 'url("./toggle.png")');
            var index = $(".anyClass ul li").index($(a));
            var dot_len = $(".dot_tip a").length;
            if (index == 0) {
            	index = dot_len -1;
            } else if (index == (dot_len+1)) {
            	index = 0;
            } else {
            	index = index - 1;
            }
            $(".dot_tip a").eq(index).css("background-image", 'url("./select.png")');
        }
    });
});
</script>
</head>
<body>
        
        <div style="height: 100px;width: 200px;">title</div>
<div class="anyClass">
    <ul>
        <li><img src="1.jpg" alt="" width="800" height="450" /></li>
        <li><img src="2.jpg" alt="" width="800" height="450" /></li>
        <li><img src="3.jpg" alt="" width="800" height="450" /></li>
    </ul>
    <a class="prev">&nbsp;</a>
    <a class="next">&nbsp;</a>
    <div class="dot_tip">
	    <a class="toc 0">&nbsp;&nbsp;</a>
	    <a class="toc 1">&nbsp;&nbsp;</a>
	    <a class="toc 2">&nbsp;&nbsp;</a>
    </div>
</div>
</body>
</html>